<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局，每个元素占自己分内位置，多了只在自己区域换行 flex1 使用</title>
</head>

<style>
  .box {
    display: flex;
    justify-content: space-around;
  }

  .item {
    flex: 1;
    overflow: hidden;
    /* 经验而谈防止溢出 */
    /* word-break: break-all; */
  }
</style>

<body>

  <!-- 如果单单是justify-content: space-around; 自适应布局，其中一个子元素宽度变宽，将会占据其它元素的控件
  这时候需要对每个子元素设置 flex: 1; 就算其中一个子元素宽度变宽，他只会在自己的空间里换行，不会影响到其他人 -->

  <div class="box">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">
      常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常常满意非常满意非常满意非常满意非常满意非常满意非常
    </div>
  </div>

</body>

</html>